<template>
  <div class="app-container">
    <el-card>
      <!--用户数据-->
      <el-form :model="queryParams" ref="queryForm" size="small" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="实践课程">
              <el-select v-model="queryParams.practiceTypeName" clearable placeholder="请选择" @change="handleQuery">
                <el-option v-for="item in practiceTypeList" :key="item.id" :label="item.type" :value="item.type">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学院">
              <el-select v-model="queryParams.xyId" filterable clearable @change="handleQuery('学院')">
                <el-option v-for="item in proxyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="专业">
              <el-select v-model="queryParams.zyId" filterable clearable @change="handleQuery('专业')">
                <el-option v-for="item in prozyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年级">
              <el-select v-model="queryParams.nj" clearable @change="handleQuery('年级')">
                <el-option v-for="item in pronjAllList" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="班级">
              <el-select v-model="queryParams.bjId" filterable clearable @change="handleQuery">
                <el-option v-for="item in probjList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发布时间">
              <el-date-picker v-model="dateRangeQuery" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                @change="handleQuery" style="width: 100%" start-placeholder="起始日期"
                end-placeholder="截至日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item>
              <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" :disabled="tableList.length === 0" plain icon="el-icon-plus" size="mini"
            v-hasPermi="['score:export:scoreExport']" @click="handleExport">导出</el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="tableList" @sort-change="sortChange">
        <el-table-column type="index" align="center" />
        <el-table-column label="学院" align="center" key="xyName" prop="xyName" :show-overflow-tooltip="true"
          sortable="custom" />
        <el-table-column label="专业" align="center" key="zyName" prop="zyName" :show-overflow-tooltip="true"
          sortable="custom" />
        <el-table-column label="班级" align="center" key="bjName" prop="bjName" :show-overflow-tooltip="true"
          sortable="custom" />
        <el-table-column label="实践课程" align="center" key="practiceTypeName" prop="practiceTypeName" />
        <el-table-column label="已发布实践积分" align="center" key="allPracticeScore" prop="allPracticeScore"
          :show-overflow-tooltip="true" sortable="custom" />
        <el-table-column label="已发布问答积分" align="center" key="allTestPaperScore" prop="allTestPaperScore"
          :show-overflow-tooltip="true" sortable="custom" />
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.currentPage"
        :limit.sync="queryParams.currentSize" @pagination="getList" />
    </el-card>
  </div>
</template>

<script>
import { listProxy, listProzy, listProbj, pronjList } from "@/api/project/prold";
import { getScore } from "@/api/largeDataScreen";
export default {
  name: "publisDistriPoint",
  data() {
    return {
      loading: false,
      total: 0,
      tableList: [],
      dateRangeQuery: [], // 查询
      proxyList: [], // 学院
      pronjAllList: [], // 年级
      prozyList: [], // 专业
      probjList: [], // 年级
      practiceTypeList: [], // 实践课程
      queryParams: {
        currentPage: 1,
        currentSize: 10,
        practiceTypeName: undefined,
        startTime: undefined,
        endTime: undefined
      },
    };
  },
  created() {
    const permissList = sessionStorage.getItem('practiceTypes').split(',');
    const typeMap = {
      1: { type: '劳动教育', id: 1 },
      2: { type: '职业素养', id: 2 },
      3: { type: '应急安全', id: 3 },
      4: { type: '思政实践', id: 4 },
      5: { type: '创新创业', id: 5 }
    };

    permissList.forEach(v => {
      if (typeMap[v]) {
        this.practiceTypeList.push(typeMap[v]);
      }
    });
    this.getList();
    this.getListProxy();
    this.getListPronj();
  },
  methods: {
    sortChange(row) {
      const sortMap = {
        xyName: 'xyNameSort',
        zyName: 'zyNameSort',
        bjName: 'bjNameSort',
        allPracticeScore: 'allPracticeScoreSort',
        allTestPaperScore: 'allTestPaperScoreSort'
      };

      // 提取排序方向的函数
      const getSortOrder = (order) => {
        if (order === 'ascending') return 'asc';
        if (order === 'descending') return 'desc';
        return null;  // 如果不是 'ascending' 或 'descending'，返回 null
      };

      // 获取对应的排序字段和排序方向
      const sortField = sortMap[row.prop];
      const sortOrder = getSortOrder(row.order);

      // 如果找到对应的排序字段，则调用 getList
      if (sortField) {
        this.queryParams.currentPage = 1;
        this.queryParams.currentSize = 10;
        Object.keys(sortMap).forEach((key) => {
          const oldSortField = sortMap[key];
          if (this.queryParams[oldSortField]) {
            delete this.queryParams[oldSortField];
          }
        })
        this.queryParams[sortField] = sortOrder;
        // this.getList({ [sortField]: sortOrder });
        this.getList();
      }
    },
    // 列表
    getList() {
      let dataQuery = { ...this.queryParams };
      if (dataQuery.limit) {
        delete dataQuery.limit;
        delete dataQuery.page;
      }
      const time = this.dateRangeQuery && this.dateRangeQuery.length > 0 ? { startTime: this.dateRangeQuery[0] + ' 00:00:00', endTime: this.dateRangeQuery[1] + ' 23:59:59' } : {};
      getScore({ ...dataQuery, ...time }).then(res => {
        this.total = res.data.total;
        this.tableList = res.data.data;
      })
    },
    // 查询学院
    getListProxy() {
      listProxy().then((response) => {
        this.proxyList = [];
        response.rows.forEach((v) => this.proxyList.push(v));

        if (response.rows.length > 0) {
          this.getListProzy(this.proxyList.map(v => v.id));
        }
      });
    },
    // 查询专业
    getListProzy(id) {
      listProzy({ xyIds: this.queryParams.xyId || id }).then((response) => {
        this.prozyList = [];
        this.probjList = [];
        response.rows.forEach((v) => this.prozyList.push(v));

        if (response.rows.length > 0) {
          this.getListProbj();
        }
      });
    },
    // 查询班级
    getListProbj(id) {
      listProbj({ zyIds: this.queryParams.zyId && this.queryParams.zyId.length > 0 ? this.queryParams.zyId : this.prozyList.map(v => v.id), njIds: this.queryParams.nj || this.pronjAllList.map(v => v.name) }).then((response) => {
        this.probjList = [];
        response.rows.forEach((v) => this.probjList.push(v));
      });
    },
    // 查询年级
    getListPronj() {
      pronjList().then((response) => {
        this.pronjAllList = response.rows;
      });
    },
    /** 搜索按钮操作 */
    handleQuery(type) {
      this.queryParams.currentPage = 1;
      if (type == '学院') {
        this.prozyList = [];
        this.queryParams.zyId = undefined;
        this.getListProzy(this.queryParams.faceXy);
      }
      if (type == '专业' || type == '年级') {
        this.queryParams.bjId = undefined;
        if (this.prozyList.length > 0) {
          this.getListProbj();
        };
      }
      this.getList();
    },
    // 重置
    resetQuery() {
      this.queryParams = {
        currentPage: 1,
        currentSize: 10,
        practiceTypeName: undefined,
        startTime: undefined,
        endTime: undefined
      };
      this.dateRangeQuery = [];
      this.getList();
      this.getListProxy();
      this.getListPronj();
    },

    /** 导出按钮操作 */
    handleExport() {
      const { currentPage, currentSize, ...data } = this.queryParams;
      const time = this.dateRangeQuery && this.dateRangeQuery.length > 0 ? { startTime: this.dateRangeQuery[0] + ' 00:00:00', endTime: this.dateRangeQuery[1] + ' 23:59:59' } : {};
      this.download('/project/probj/exportScoreDistribution', {
        ...data,
        ...time
      }, `积分分布导出.xlsx`)
    }
  },
};
</script>
<style scoped lang="scss"></style>
